import { Button } from "antd"
import { useNavigate, Link } from "react-router-dom"
import './home.css'
import { Input, Carousel } from 'antd'
import { selectAll } from "../../../request/fake-db"
import { useState } from "react"
import item from "../../../request/fake-db/item"
import { SearchOutlined, HeartTwoTone } from "@ant-design/icons"
import MyLike from "../img/heart.png"
import MyTopic from "../img/topic.png"
import MySpecial from "../img/special.png"
import MySale from "../img/sale.png"
function Home() {

    const [items, setItems] = useState(selectAll('item'))
    const carouselItems = items.slice(0, 4)
    const carouselItems1 = items.slice(5, 9)
    const hotItems = items.slice(0, 14)
    const [isLandscape, setIsLandscape] = useState(window.matchMedia("(orientation: landscape)").matches)
    const handleOrientationChange = () => {
        const Landscape = window.matchMedia("(orientation: landscape)").matches
        setIsLandscape(Landscape)
    }
    // 监听屏幕方向变化
    window.addEventListener('resize', handleOrientationChange)
    const navigate = useNavigate()
    return (
        // <Button onClick={() => navigate('/item/1f04af73-5e40-4cb3-b313-d0230bc6aa71')}>测试商品</Button>
        <>
            <div className="header-area">
                {isLandscape ? (
                    <div className="advertisement-top-img-container">
                        <img className="advertisement-img" src="https://gw.alicdn.com/imgextra/i1/O1CN01HzAnSB1z7XX3mHQv1_!!6000000006667-0-tps-7680-120.jpg"></img>
                    </div>
                ) : (
                    <div></div>
                )}
                <div className="search">
                    {isLandscape ? (
                        <div className="our-logo">
                            <h4>nb-mall</h4>
                        </div>
                    ) : (
                        <div></div>
                    )}
                    <Input className="search-input" placeholder="请输入商品，如：手机" prefix={<SearchOutlined />} />
                </div>
                <div className="carousel-container">
                    <div className="carousel">
                        <Carousel className="goods-advertisment" autoplay >
                            {carouselItems.map((item) => {
                                return (
                                    <div className="contentStyle" key={item.id}>
                                        <Link to={`/item/${item.id}`} id={item.id} className="advertisement-img-container">
                                            <img src={item.imgs[0]} alt={item.label} />
                                        </Link>
                                    </div>
                                )
                            })}
                        </Carousel>
                    </div>
                    {isLandscape ? (
                        <div className="hot-goods">
                            <h4>热购榜</h4>
                            <ul>
                                {hotItems.map((item)=>{
                                    return (
                                        <li>
                                            <label htmlFor={item.id}>
                                                热门
                                            </label>
                                            <Link className="hot-link" to={`/item/${item.id}`} id={item.id} >
                                                {item.label}
                                            </Link>
                                        </li>
                                    )
                                })}
                            </ul>

                        </div>
                    ) : (
                        <div></div>
                    )}
                    {isLandscape ? (
                        <div className="carousel">
                            <Carousel className="goods-advertisment" autoplay >
                                {carouselItems1.map((item) => {
                                    return (
                                        <div className="contentStyle" key={item.id}>
                                            <Link to={`/item/${item.id}`} id={item.id} className="advertisement-img-container">
                                                <img src={item.imgs[0]} alt={item.label} />
                                            </Link>
                                        </div>
                                    )
                                })}
                            </Carousel>
                        </div>
                    ) : (
                        <div></div>
                    )}
                    
                </div>


                <div className="tag-area">
                    <div className="tag-container">
                        <div className="img-container" style={{ backgroundColor: 'rgb(246,173,60)' }}>
                            <img src={MySpecial}></img>
                        </div>
                        <h4>专题</h4>
                    </div>
                    <div className="tag-container">
                        <div className="img-container" style={{ backgroundColor: 'rgb(231,147,162)' }}>
                            <img src={MyTopic}></img>
                        </div>
                        <h4>话题</h4>
                    </div>
                    <div className="tag-container">
                        <div className="img-container" style={{ backgroundColor: '#dda0dd' }} >
                            <img src={MyLike}></img>
                        </div>
                        <h4>优选</h4>
                    </div>
                    <div className="tag-container">
                        <div className="img-container" style={{ backgroundColor: '#73c088' }} >
                            <img src={MySale}></img>
                        </div>
                        <h4>特惠</h4>
                    </div>
                </div>
            </div>
            <div className="goods-area">
                {items.map((item) => {
                    return (
                        <div className="goods-container" key={item.id}>
                            <Link to={`/item/${item.id}`} id={item.id} className="goods-img-container" >
                                <img src={item.imgs[0]} title={item.label} />
                            </Link>
                            <label htmlFor={item.id} className="introduction" title={item.label}>{item.label}</label>
                            <label htmlFor={item.id} className="price">￥<span style={{fontSize:"20px",fontWeight:"800"}} >{item.options[0].price}</span>  <span style={{color: "rgba(0,0,0,0.7)", fontSize:"12px", fontWeight:"500"}}>  已有114514人购买</span></label>
                        </div>
                    )
                })}
            </div>

        </>
    )
}

export default Home